<template>
    <div class="home-page">
        <div class='left'>
            <div id="left" style="width: 300px; height: 400px;"></div>
            <div class="leftbot" style="width: 300px; height: 400px;"></div>
        </div>
        <div class="con" style="width: 600px; height: 600px;"></div>
        <div class="rightbox">
            <div class="right" style="width: 300px; height: 400px;"></div>
            <div class="rightbot" style="width: 300px; height: 400px;"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios'

onMounted(() => {
    var chartDom = document.getElementById('left');

    var myChart = echarts.init(chartDom);
    var option;

    option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                smooth: true,
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    option && myChart.setOption(option);


    // 获取放置地图的标签
    const con = document.querySelector('.con')
    // 初始化
    const myChart1 = echarts.init(con)

    // 中间的地图
    // 请求中国地图的数据
    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000.json').then(res => {
        // 注册地图
        echarts.registerMap('China', res.data)
        const opt = {
            series: [
                {
                    type: 'map',
                    map: 'China',
                }
            ]
        }
        myChart1.setOption(opt)
    })

    // 饼图
    const right = document.querySelector('.right')
    const myChart2 = echarts.init(right)

    const opt1 = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart2.setOption(opt1)


    // 横向柱状图
    const leftbot = document.querySelector('.leftbot')
    const myChart3 = echarts.init(leftbot)
    const opt3 = {
        yAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                        //通过修改前4个参数，可以实现不同的渐变方向
                        /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                        0, 0, 1, 0, [{//代表渐变色从正上方开始
                            offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                            color: 'blue'
                        }, //柱图渐变色
                        {
                            offset: 1, //指100%处的颜色
                            color: 'purple'
                        }
                    ]
                    ),
                    barBorderRadius: [0, 15, 15, 0]
                }
            }
        ]
    };
    myChart3.setOption(opt3)

    // 右下角的柱状图
    const rightbot = document.querySelector('.rightbot')
    const myChart4 = echarts.init(rightbot)
    const opt4 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [
                    120,
                    {
                        value: 200,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{//代表渐变色从正上方开始
                                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                                    color: 'blue'
                                }, //柱图渐变色
                                {
                                    offset: 1, //指100%处的颜色
                                    color: 'purple'
                                }
                            ]
                            ),
                        }
                    },
                    150,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar',
                itemStyle: {
                    barBorderRadius: [15, 15, 0, 0]
                }
            }
        ]
    };
    myChart4.setOption(opt4)
})
</script>

<style lang="scss" scoped>
.home-page {
    display: flex;

    .left {
        width: 25%;
    }

    .con {
        width: 50%;
    }

    .rightbox {
        width: 25%;
    }
}
</style>